<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大风车</title>
		<script src="../js/jquery-1.11.1(1).js"></script>
		<style>
			.imga{
				animation: dfc .8s linear infinite;
				width: 300px;
				height: 300px;
			}
			/* 关键真 */
			@keyframes dfc{
				0%{
					transform: transl ate(20px) rotate(180deg);
				}
				50%{
					transform: transl ate(600px) rotate(360deg);
				}
				100%{
					transform: transl ate(2000px) rotate(720deg);
				}
			}
		</style>
	</head>
	<body>
		<img src="../img/dfc.jpg" alt="1" />
		<audio src="../img/鸡叫.wav" autoplay></audio>
		    <button id="btn1">开转</button>
			<button id="btn2">翻转</button>
			<button id="btn3">暂停</button>
				<script>
					//点击：开转 图片切换并且添加样式 .imga
					$("#btn1").click(function(){
						$("img").attr("src","../img/蔡徐坤.png" ).addClass("imga");
					});
					$("#btn2").click(function(){
						
					});
				</script>
	</body>
</html>